<div id="search-component">
  <label for="search-box">Hero Search</label>
  <input #searchBox id="search-box" (input)="search(searchBox.value)" />

  <ul class="search-result">
    <!--$ 是一个约定，表示 heroes$ 是一个 Observable 而不是数组-->
    <!--由于 *ngFor 不能直接使用 Observable，所以要使用一个管道字符（|），后面紧跟着一个 async。
    这表示 Angular 的 AsyncPipe 管道，它会自动订阅 Observable，这样你就不用在组件类中这么做了-->
    <li *ngFor="let hero of heroes$ | async" >
      <a routerLink="/detail/{{hero.id}}">
        {{hero.name}}
      </a>
    </li>
  </ul>
</div>
